import React, { useState } from 'react'
import { Link, useHistory } from 'react-router-dom'
import { Header, AlertTip, RouterView } from 'src/components'
import classNames from 'classnames'
import { useDispatch, useSelector } from 'react-redux'
import { postAddAddress } from 'src/api/getData'
import { CONFIRM_ADDRESS } from 'src/redux/action-type'
import routerData from '../routerData'
import './index.scss'

// 新增收货地址
const AddAddress = () => {
    const dispatch = useDispatch()
    const { userInfo, searchAddress, geohash } = useSelector(state => state)
    const history = useHistory()
    const [name, setName] = useState() //姓名
    const [sex, setSex] = useState(1) //性别
    const [phone, setPhone] = useState() //电话
    const [address_detail, setAddressDetail] = useState() //详细地址
    const [tag, setTag] = useState('') //备注
    // const [tag_type, setTagType] = useState(1) //备注类型
    const [phone_bk, setPhoneBk] = useState(false) //是否选择备注电话
    const [anntherPhoneNumber, setAnntherPhoneNumber] = useState('') //备注电话
    const [showAlert, setShowAlert] = useState(false) //弹出框
    const [alertText, setAlertText] = useState() //弹出框信息
    // const [poi_type, setPoiType] = useState(0) //地址类型
    const onClose = () => {
        setShowAlert(false)
    }
    //选择性别
    const chooseSex = (sex) => {
        setSex(sex)
    }
    //保存地址信息
    const addAddress = async () => {
        if (!(userInfo && userInfo.user_id)) {
            setShowAlert(true)
            setAlertText('请登录')
            return
        } else if (!name) {
            setShowAlert(true)
            setAlertText('请输入姓名')
            return
        } else if (!phone) {
            setShowAlert(true)
            setAlertText('请输入电话号码')
            return
        } else if (!searchAddress) {
            setShowAlert(true)
            setAlertText('请选择地址')
            return
        } else if (!address_detail) {
            setShowAlert(true)
            setAlertText('请输入详细地址')
            return
        }
        let tag_type
        if (tag === '家') {
            tag_type = 2
        } else if (tag === '学校') {
            tag_type = 3
        } else if (tag === '公司') {
            tag_type = 4
        }
        // setTagType(tag_type)
        let res = await postAddAddress(userInfo.user_id, searchAddress.name, address_detail, geohash, name, phone, anntherPhoneNumber, 0, sex, tag, tag_type);
        //保存成功返沪上一页，否则弹出提示框
        if (res.message) {
            setShowAlert(true)
            setAlertText(res.message)
        } else {
            dispatch({
                type: CONFIRM_ADDRESS,
                a: 1
            })
            history.go(-1);
        }
    }

    return <div className="address_page">
        <Header title="添加地址" goBack></Header>
        <section className="page_text_container">
            <section className="section_list">
                <span className="section_left">联系人</span>
                <section className="section_right">
                    <input type="text" name="name" placeholder="你的名字"
                        value={name}
                        onInput={(e) => setName(e.target.value)}
                        className="input_style" />
                    <div className="choose_sex">
                        <span className="choose_option">
                            <svg onClick={() => chooseSex(1)} className={classNames('address_empty_right', { choosed: sex === 1 })}>
                                <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#select"></use>
                            </svg>
                            <span>先生</span>
                        </span>
                        <span className="choose_option">
                            <svg onClick={() => chooseSex(2)} className={classNames('address_empty_right', { choosed: sex === 2 })}>
                                <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#select"></use>
                            </svg>
                            <span>女士</span>
                        </span>
                    </div>
                </section>
            </section>
            <section className="section_list">
                <span className="section_left">联系电话</span>
                <section className="section_right">
                    <div className="phone_add">
                        <input type="text" name="phone" placeholder="你的手机号"
                            value={phone}
                            onInput={(e) => setPhone(e.target.value)}
                            className="input_style" />
                        <img src="/images/add_phone.png" height="20" width="20" onClick={() => setPhoneBk(true)} alt="" />
                    </div>
                    {phone_bk && <input type="text" name="anntherPhoneNumber" placeholder="备选电话"
                        value={anntherPhoneNumber}
                        onInput={(e) => setAnntherPhoneNumber(e.target.value)}
                        className="input_style phone_bk" />}
                </section>
            </section>
            <section className="section_list">
                <span className="section_left">送餐地址</span>
                <section className="section_right">
                    <div className="choose_address"><Link to="/confirmOrder/chooseAddress/addAddress/searchPosition">{searchAddress ? searchAddress.name : '小区/写字楼/学校等'}</Link></div>
                    <input type="text" name="address_detail" placeholder="详细地址（如门牌号等）"
                        value={address_detail}
                        onInput={(e) => setAddressDetail(e.target.value)}
                        className="input_style" />
                </section>
            </section>
            <section className="section_list">
                <span className="section_left">标签</span>
                <section className="section_right">
                    <input type="text" name="tag" placeholder="无/家/学校/公司"
                        value={tag}
                        onInput={(e) => setTag(e.target.value)}
                        className="input_style" />
                </section>
            </section>
        </section>
        <div className="determine" onClick={addAddress}>确定</div>
        {showAlert && <AlertTip onClose={onClose} alertText={alertText}></AlertTip>}
        <RouterView data={routerData} />
    </div>
}

export default AddAddress